<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        ul{
            display: flex;
            list-style-type: none;
        }
        ul li{
            width: 100px;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script>
        document.myReady(function(){
            var domAll = document.getElementsByClassName('all')[0].getElementsByTagName('input')[0];
            //选择all 按钮，全选，全部选
            //选择其他的 单选 OK
            //选择DOM方法 domSelect(class)--返回类数组
            var domSelect = function(cls){
                var dom = document.getElementsByClassName(cls)[0].getElementsByTagName('input');
                return dom;
            }
            domAll.addEventListener('click',function(){
                var cheAllArr = domSelect('demo');
                var cheAllArrLen = cheAllArr.length;
                for(let i = 0; i < cheAllArrLen; i ++){
                    cheAllArr[i].checked = this.checked;
                }
            },false)
        });
    </script>
</head>
<body>
    <ul class="all">
        <li><input type="checkbox"></li>    
        <li>姓名</li>
        <li>年龄</li>
    </ul>
    <div class="demo">
        <ul class="num1">
            <li><input type="checkbox"></li>
            <li>姓名1</li>
            <li>12</li>
        </ul>
        <ul class="num2">
            <li><input type="checkbox"></li>
            <li>姓名2</li>
            <li>13</li>
        </ul>
        <ul class="num3">
            <li><input type="checkbox"></li>
            <li>姓名3</li>
            <li>14</li>
        </ul>
        <ul class="num4">
            <li><input type="checkbox"></li>
            <li>姓名4</li>
            <li>15</li>
        </ul>
    </div>
</body>
</html>